<template>
  <div class="similarity_box">
    <a-tooltip>
      <template slot="title"> 记事本 </template>
      <a @click="editnotepad()">记事本</a>
    </a-tooltip>
    <!-- 当前流程中相似数据弹出层 -->
    <a-modal
      v-model="isShowModal"
      width="1100px"
      :bodyStyle="{ height: '400px', overflow: 'auto' }"
      title="记事本"
      destroyOnClose
      :footer="null"
    >
      <a-form-model>
        <HEADERDEFINITION ref="headerDefRef" :ucolumns="ucolumns" @f_setColumns="s_setColumns" />

        <!-- 表格数据 -->
        <a-table
          :scroll="{ x: 1000, y: 550 }"
          :columns="ucolumns"
          :data-source="listData"
          :loading="loading"
          rowKey="id"
          size="middle"
          :bordered="ubordered"
          :rowClassName="rowClassName"
          :pagination="false"
        >
          <div slot="authorSlot" slot-scope="author" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ author }}</span>
              </template>
              {{ author }}
            </a-tooltip>
          </div>
          <div slot="contentSlot" slot-scope="content" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ content }}</span>
              </template>
              {{ content }}
            </a-tooltip>
          </div>
          <div slot="createtimeSlot" slot-scope="createtime" class="overBox" style="width: 100%">
            <a-tooltip placement="topLeft">
              <template slot="title">
                <span>{{ createtime }}</span>
              </template>
              {{ createtime }}
            </a-tooltip>
          </div>
        </a-table>
      </a-form-model>

      <!-- <div slot="footer" class="similarity_box_footer">
          <a-button class="cancle_button" @click="() => isShowModal=false"><span class="cancle_button_span">取消</span></a-button>
          <a-button class="ok_button" @click="() => isShowModal=false"><span class="ok_button_span">确定</span></a-button>
        </div> -->
    </a-modal>
  </div>
</template>
<script>
import { St_admreviewKey } from '@/enumeration/St_admreview'
import { viewByApplyid } from '@/api/apply/apl_note.js'

export default {
  props: {
    applyid: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      ucolumns: [
        {
          title: '创建人',
          dataIndex: 'author',
          key: 'author',
          width: 290,
          align: 'center',
          fixed: 'left',
          scopedSlots: { customRender: 'authorSlot' }
        },
        {
          title: '记事本',
          dataIndex: 'content',
          key: 'content',
          width: 375,
          align: 'center',
          scopedSlots: { customRender: 'contentSlot' }
        },
        {
          title: '时间',
          dataIndex: 'createdate',
          key: 'createdate',
          width: 380,
          align: 'center',
          scopedSlots: { customRender: 'createdateSlot' }
        }
      ],
      isShowModal: false,
      listData: [],
      loading: false,
      upagination: {
        // 表格分页参数
        defaultPageSize: 20,
        total: 0,
        current: 1,
        pageSize: 20,
        showTotal: total => `共计 ${total} 条数据`,
        showSizeChanger: true,
        pageSizeOptions: ['10', '20', '50', '100']
      },
      ubordered: true, // 表格边框是否显示
      St_admreviewKey: St_admreviewKey
      // applyid: 'eGbSOmQuUp3wlTG8OR7fn1693279514334'
      // notePads:{
      //     f_applyid: '', //申请id
      //     f_acceptcode: '', //案号
      //     f_content: '', //记事本内容
      //     f_author: '', //创建人
      //     f_createdate: '', //最后更新时间
      //     f_userid: '', // userid
      // },
    }
  },
  components: {
    HEADERDEFINITION: () => import('@/views/customComponents/headerDefinition.vue')
  },
  created () {},
  methods: {
    //applyid记事本查询
    editnotepad () {
      console.log('applyid', this.applyid)
      this.isShowModal = true
      viewByApplyid(this.applyid).then(res => {
        console.log('res', res)
        if (res.code !== 0) {
          this.$message.error('获取数据失败')
        } else {
          //console.log('records')
          //console.log('records',res.data)
          this.listData = res.data
          //this.listData.push(res.data);
          this.upagination.total = res.data.total
          this.upagination.current = res.data.current
          this.upagination.pageSize = res.data.size
          this.needDealNum = res.data.total
          // console.log('listData',this.listData)
        }
      })
    },

    // 重置表头方法
    resetting () {
      this.$refs.headerDefRef.f_resetting()
    },
    // 子组件回调函数, 重置表头
    s_setColumns (columns) {
      this.ucolumns = columns
    },

    rowClassName (record, index) {
      return index % 2 === 0 ? 'oddRow' : 'evenRow'
    },

    transTypeLabel (status) {
      if (this.St_admreviewKey[status]) {
        return this.St_admreviewKey[status].name
      }
      return ''
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/components/TableDrag/style.less';

.headerdefBox img {
  height: 20px;
  width: 20px;
}
.headerdefBox {
  // border: 1px solid red;
  margin: 0 20px 20px 0;
  display: flex;
  justify-content: end;
}

.collapseArea {
  border: none;
  .ant-collapse-item {
    border-bottom: none;
  }
  /deep/.ant-collapse-content {
    border-top: none;
  }
}
/deep/ .ant-collapse-header {
  background-color: #fff;
}
.collapseArea_header {
  .ant-form-item {
    margin-bottom: 0;
  }
}

.collapseArea_body {
  padding-top: 10px;
  padding: 0 20px 0 0px;
}

.overBox {
  width: 90%;
  overflow: hidden; /*超出部分隐藏*/
  white-space: nowrap; /*不换行*/
  text-overflow: ellipsis; /*超出部分文字以...显示*/
}

.similarity_box {
}
.similarity_box_footer {
  > span {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 800;
  }
  .cancle_button {
    width: 100px;
    margin-right: 20px;
    height: 34px;

    .cancle_button_span {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 800;
      color: #666666;
      letter-spacing: 0em;
      margin-right: 0em;
    }
  }

  .ok_button {
    width: 100px;
    background: #0072c6;
    height: 34px;

    .ok_button_span {
      font-size: 16px;
      font-family: 'PingFang-SC-Heavy';
      font-weight: 800;
      color: #ffffff;
      letter-spacing: 0em;
      margin-right: 0em;
    }
  }
}

::v-deep .ant-modal-content {
  background: #ffffff;
  border-radius: 12px;
}
::v-deep .ant-modal-header {
  background: #f3f4f8;
  border-radius: 12px;
}
::v-deep .ant-modal-title {
  font-weight: 600;
  color: #2c2c2c;
  font-size: 16px;
}

::v-deep .ant-table-thead > tr > th {
  background: #f5f7fa;
  padding: 18px 12px;
}

::v-deep .ant-table-column-title {
  font-size: 15px;
  font-family: 'PingFang-SC-Heavy';
  font-weight: 500;
  color: #666666;
}

::v-deep .ant-table-tbody > tr > td {
  font-size: 14px;
  font-family: 'PingFang-SC-Heavy';
  font-weight: 800;
  color: #2c2c2c;
  padding: 16px 12px !important;
  background: #f5f7fa;
}

::v-deep .ant-table-body,
.ant-table-header {
  word-break: break-all;
  &::-webkit-scrollbar {
    width: 6px; /*高宽分别对应横竖滚动条的尺寸*/
    height: 6px;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 6px;
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #a2c6e1;
  }
  &::-webkit-scrollbar-track {
    // -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 5px;
    background: transparent;
  }
}
</style>
